<div class="widget-body chart-body {{ widget_extra_css_class }}" id="widget-body-{{ widget_pk }}-ch-{{chart.pk}}">
    {% if chart.x_axis_var is not None %}<div class="hidden variable-config" data-name="{{ chart.x_axis_var.name }}" data-key="{{ chart.x_axis_var.id }}" data-init-type="1" data-type="variable"></div>{% endif %}
    <div class="main-chart-area" style="height:450px; width:100%;">
        <div id="chart-container-{{ widget_pk }}-{{chart.pk}}" class="chart-container" style="width: 100%; height:100%;"
             data-xaxis='{"id":"{% if chart.x_axis_var is not None %}{{chart.x_axis_var.id}}{% else %}False{% endif %}","linlog":"{% if chart.x_axis_linlog %}True{% else %}False{% endif %}"}'
             data-xaxis-ticks='{{chart.x_axis_ticks}}'
             data-axes0-yaxis='{"min":{{chart.y_axis_min}},"max":{{chart.y_axis_max}},"label":"{{chart.y_axis_label}}"}'
             data-yaxis='{"plotpoints":"{% if chart.show_plot_points %}True{% else %}False{% endif %}","plotlines":"{% if chart.show_plot_lines > 0 %}True{% else %}False{% endif %}",
             "steplines":"{% if chart.show_plot_lines == 2 %}True{% else %}False{% endif %}","uniquescale":"{% if chart.y_axis_uniquescale %}True{% else %}False{% endif %}"}'>
            <div class="chart-placeholder"></div>
            <div class="chartTitle">{{chart.title}}</div>
            <div class="chart-zoom-bar" >
                <label>
                    Zoom on axes :
                    <input class="activate_zoom_x" type="checkbox" checked="checked">X
                    <input class="activate_zoom_y" type="checkbox" checked="checked">Y
                </label>
            </div>
            <div class="chart-btn-bar" >
                <div class="btn-group">
                    <button type="button" class="btn btn-default chart-save-csv" data-toggle="tooltip" data-placement="top" title="" data-original-title="Export data (csv)">
                        <span class="glyphicon glyphicon-list-alt"></span>
                    </button>
                    <button type="button" class="btn btn-default chart-save-picture" data-toggle="tooltip" data-placement="top" title="" data-original-title="Save picture">
                        <span class="glyphicon glyphicon-picture"></span>
                    </button>
                    <button type="button" class="btn btn-default chart-ResetSelection" data-toggle="tooltip" data-placement="top" title="" data-original-title="Reset X and Y zooms">
                        <span class="glyphicon glyphicon-fullscreen"></span>
                    </button>
                    <button type="button" class="btn btn-default chart-ZoomYToFit" data-toggle="tooltip" data-placement="top" title="" data-original-title="Reset Y zoom">
                        <span class="glyphicon glyphicon-resize-vertical"></span>
                    </button>
                    <button type="button" class="btn btn-default chart-ZoomXToFit" data-toggle="tooltip" data-placement="top" title="" data-original-title="Reset X zoom">
                        <span class="glyphicon glyphicon-resize-horizontal"></span>
                    </button>
                </div>
            </div>
            <div class="axisLabel xaxisLabel">{{chart.x_axis_label}}</div>
            <!--<div class="axisLabel yaxisLabel">{{chart.y_axis_label}}</div>-->
        </div>
    </div>
</div>
